<template>
  <div class="tinymce-box">
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :headers="tokenHeader"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      accept=".doc, .docx"
    >
      <el-button size="small" type="primary">转换word</el-button>
      <div slot="tip" class="el-upload__tip">只能上传doc/docx文件,转换效果不太好,建议手动编辑,转换后会替换原内容</div>
    </el-upload>
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>

<script>
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入不显示
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/icons/default/icons.js";

// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件

import "tinymce/plugins/advlist"; //
import "tinymce/plugins/anchor"; //
import "tinymce/plugins/autolink"; //
import "tinymce/plugins/autoresize"; //
import "tinymce/plugins/autosave"; //
import "tinymce/plugins/bbcode"; //

import "tinymce/plugins/charmap"; //
import "tinymce/plugins/code"; //
import "tinymce/plugins/codesample"; //
import "tinymce/plugins/colorpicker"; //
import "tinymce/plugins/contextmenu"; //

import "tinymce/plugins/directionality"; //
import "tinymce/plugins/emoticons"; //
import "tinymce/plugins/emoticons/js/emojis";
import "tinymce/plugins/fullpage"; //
import "tinymce/plugins/fullscreen"; //
import "tinymce/plugins/help"; //

import "tinymce/plugins/hr"; //
import "tinymce/plugins/image"; //
import "tinymce/plugins/imagetools"; //
import "tinymce/plugins/importcss"; //
import "tinymce/plugins/insertdatetime"; //

import "tinymce/plugins/legacyoutput"; //
import "tinymce/plugins/link"; //
import "tinymce/plugins/nonbreaking"; //
import "tinymce/plugins/noneditable"; //
import "tinymce/plugins/pagebreak"; //

import "tinymce/plugins/paste"; //
import "tinymce/plugins/preview"; //
import "tinymce/plugins/print"; //
import "tinymce/plugins/quickbars"; //
import "tinymce/plugins/table"; //

import "tinymce/plugins/template"; //
import "tinymce/plugins/textcolor"; //
import "tinymce/plugins/textpattern"; //
import "tinymce/plugins/toc"; //
import "tinymce/plugins/visualblocks"; //
import "tinymce/plugins/visualchars"; //
import "tinymce/plugins/save"; //
import "tinymce/plugins/searchreplace"; //

export default {
  components: {
    Editor
  },
  name: "tinymce",
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: Array,
      // default: "lists image media table wordcount fullscreen preview autoresize"
      default: ()=> [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
        "searchreplace visualblocks visualchars code",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons paste textcolor colorpicker textpattern imagetools codesample",
        "fullscreen"
      ]
    },
    toolbar: {
      type: [String, Array],
      default:
        "fontsizeselect | undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image emoticons media table codesample | removeformat | fullscreen | preview"
    }
  },
  data() {
    return {
      init: {
        // icons_url: "/tinymce/icons/default/icons.js", // load icon pack
        icons: "default",
        language_url: "/tinymce/langs/zh_CN.js", // 语言文件需要放在此路径可以直接访问到的位置
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide", // 皮肤需要放在此路径可以直接访问到的位置
        // skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
        height: 600,
        width: "95%",
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        resize: "both",
        // menubar: false,
        menubar: "file edit insert view format table",
        // paste_retain_style_properties: "all",
        // paste_word_valid_elements: "*[*]", // word需要它
        // paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
        // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
        // paste_webkit_styles: "all",
        // paste_merge_formats: true,
        // nonbreaking_force_tab: false,
        // paste_auto_cleanup_on_paste: false,
        // 此处为图片上传处理函数
        images_upload_handler: (blobInfo, success, failure) => {
          // const img = "data:image/jpeg;base64," + blobInfo.base64();
          // success(img);
          let data = new FormData();
          data.append("file", blobInfo.blob());
          this.$https
            .fileUpload("file/putObject?dir=richTextImage", data)
            .then(res => {
              if (res.data.data) {
                success(res.data.data);
              } else {
                this.$emit("on-upload-fail");
                failure("上传失败");
              }
            })
            .catch(err => {
              this.$emit("on-upload-fail");
              failure("上传失败");
            });
        }
      },
      myValue: this.value,
      uploadUrl: process.env.VUE_APP_ADMIN_BASE_URL + "news/docToHtml",
      tokenHeader: { token: sessionStorage.getItem("token") }
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    },
    beforeUpload(file) {
      if (file.name.indexOf(".doc") < 0 && file.name.indexOf(".docx") < 0) {
        this.$message.error("仅支持word格式！");
        return false;
      }
    },
    onSuccess(response, file, fileList) {
      if(response.code != 200) {
        this.$message.error(response.msg);
      } else {
        this.$message.success('解析成功');
        this.myValue=response.data;
        this.$emit("input", this.myValue);
      }
    }
  },
  watch: {
    value(newValue) {
      this.myValue = newValue;
    },
    myValue(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>
<style scoped>
</style>